import React, { createRef } from 'react'
import { useDispatch } from 'react-redux'
import { addGoods } from '../store/slice/goodsSlices'
import { useNavigate } from 'react-router-dom'
export default function AddGoods() {
  const goodNameRef = createRef()
  const goodPriceRef = createRef()
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const handleMessage = (e) => {
    e.preventDefault()
    let gname = goodNameRef.current.value.trim()
    let gprice = goodPriceRef.current.value.trim()
    let goods = {
      gname,
      gprice,
    }
    dispatch(addGoods(goods)) // 数据添加到切片
    //跳转到商品列表页面
    navigate('/goodslist')
  }

  return (
    <form onSubmit={handleMessage}>
      <p>
        商品名称: <input type="text" ref={goodNameRef} />
      </p>
      <p>
        商品价格: <input type="text" ref={goodPriceRef} />
      </p>
      <button>添加商品</button>
    </form>
  )
}
